<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>注册</h1>
		<form id="registerForm" name="myForm" action="注册成功.html" method="get">
			<label for="username">用户名：</label>
			<input type="text" id="username" name="username"/><br>
			<label for="password">密码：</label>
			<input type="password" id="password" name="password" /><br>
			<label for="email">邮箱：</label>
			<input type="text" id="email" name="email"/><br>
			<label for="tel">电话号码：</label>
			<input type="text" id="tel" name="tel"/><br>
			爱好:
			<input type="checkbox" value="踢球" name="likes" />足球
			<input type="checkbox" value="篮球" name="likes" />篮球
			<input type="checkbox" value="看书" name="likes" />看书
			<input type="checkbox" value="旅游" name="likes" />旅游
			<input type="button" value="全选" onclick="selectAll()" />
			<input type="button" value="全不选" onclick="selectNone()" />
		</form>
		
		<script type="text/javascript">
			//访问表单元素方式
			// document.forms[0].style.background="red"
			// document.myForm.style.background="blue"
			// registerForm.style.background="green"
			
			//访问表单中元素方式
			document.forms[0].elements[0].style.background="red"
			document.forms[0].password.style.background="green"
			email.style.background="blue"
			
			function selectAll()
			{
				var cbs = document.querySelectorAll("input[type=checkbox]")
				
				for(var i in cbs)
				{
					cbs[i].checked = "checked";
				}
			}
			
			function selectNone()
			{
				var cbs = document.querySelectorAll("input[type=checkbox]")
				
				for(var i in cbs)
				{
					cbs[i].checked = "";
				}
			}
		</script>
	</body>
</html>
